<template>
  <div class="index">
    <div class="tour px-3 pb-3 border-t-4">
      <index-title title="旅游攻略" link="/article/index"> </index-title>
      <div class="tour-list">
        <div
          class="item mb-4"
          v-for="(article, index) in tourArticle"
          :key="`article-${index}`"
          :class="{ 'mt-4': index > 0 }"
        >
          <div
            class="image"
            @click="$router.push(`/article/${article.TourarticleID}`)"
          >
            <img :src="article.Thumb" />
          </div>
          <div class="info ml-2">
            <div class="top">
              <div class="left">
                <h4 class="my-1 fz-16">
                  <router-link :to="`/article/${article.TourarticleID}`">{{
                    article.Title
                  }}</router-link>
                </h4>
                <div class="author">
                  <div class="avatar mr-1">
                    <img src="https://img.yzcdn.cn/vant/cat.jpeg" />
                  </div>
                  <span>作者：</span>
                  <span class="author-name">{{ article.Author }}</span>
                </div>
              </div>
              <div class="right">
                <div class="thumb_up">
                  <van-icon name="good-job" />
                </div>
                <div class="counts">{{ article.Hits }}</div>
              </div>
            </div>
            <div class="content max-line-3 text-desc">
              {{ article.Bref }}
            </div>
            <div class="more">
              <icon-svg icon-class="view" class="mr-1"></icon-svg>
              <span class="mr-2">{{ article.Hits }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import IndexTitle from '@/components/IndexTitle'
import moment from 'moment'
import { fetchIndex } from '@/api'
import _ from 'lodash'
export default {
  components: {
    IndexTitle,
  },
  computed: {
    isShowLogout() {
      return this.$store.state.user.token || false
    },
    topNavPlaces() {
      return this.topNavItems.length % 5 > 0
        ? 5 - (this.topNavItems.length % 5)
        : 0
    },
    trainDate() {
      moment.locale('zh-CN')
      return moment().format('MM月DD日 dddd')
    },
    topClose: {
      get() {
        return this.$store.state.nav.open
      },
      set() {
        this.$store.commit('nav/SET_OPEN')
      },
    },
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    this.getData()
  },
  methods: {
    gotoVideoPlayer(video, image, title) {
      this.$store.commit('video/SET_URL', video)
      if (typeof image !== 'undefined') {
        this.$store.commit('video/SET_THUMB', image)
      } else {
        this.$store.commit('video/SET_THUMB', false)
      }
      if (typeof title !== 'undefined') {
        this.$store.commit('video/SET_TITLE', title)
      } else {
        this.$store.commit('video/SET_TITLE', false)
      }
      if (video) {
        this.$router.push('/video-player')
      }
    },
    async onSearch() {
      this.$store.commit('search/SET_NAME', this.searchKey)
      this.$router.push('/search')
      //await search({ Name:  })
    },
    toggleNav() {
      this.$store.commit('nav/SET_OPEN')
    },
    handleScroll() {
      let scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop
      if (scrollTop > 145) {
        this.topSearchBg = true
      } else {
        this.topSearchBg = false
      }
    },
    gotoLink(link) {
      if (link && link !== 'null' && link !== 'undefined') {
        if (link.indexOf('https://') === 0 || link.indexOf('http://') == 0) {
          window.location.href = link
        } else {
          this.$router.push(link)
        }
      }
    },
    openVideo(data) {
      this.$store.dispatch('video/setData', data)
      this.$router.push('/video-player')
    },
    async getData() {
      const { data, code } = await fetchIndex()
      if (code === 0) {
        this.data = data
        if (_.get(this.data, 'topRotator[0]', false)) {
          this.topSwipes = data.topRotator
        }
        if (_.get(data, 'morningNews[0]', false)) {
          this.topNews = data.morningNews
        }
        if (_.get(data, 'flowAd1.Thumb', false) && !data.flowAd1.isHide) {
          this.ad1 = data.flowAd1
        }
        if (_.get(data, 'hotList[0].Thumb', false)) {
          this.hotItems = data.hotList
        }
        if (_.get(data, 'hotListBig.Thumb', false)) {
          this.hotListBig = [data.hotListBig]
        }
        if (_.get(data, 'specialty[0].Thumb', false)) {
          this.techanItems = data.specialty
          this.techanItems.forEach((item, index) => {
            if (item.Thumb.indexOf('http') !== 0) {
              this.techanItems[index].Thumb =
                'https://ylz.gswanzhong.com' + item.Thumb
            }
          })
        }
        if (_.get(data, 'culture[0].Thumb', false)) {
          this.wenItems = data.culture
          this.wenItems.forEach((item, index) => {
            if (item.Thumb.indexOf('http') !== 0) {
              this.wenItems[index].Thumb =
                'https://ylz.gswanzhong.com' + item.Thumb
            }
          })
        }
        if (_.get(data, 'train.info.infos[0].arriveInfo.city', false)) {
          this.trainData = data.train.info.infos
        }
        if (_.get(data, 'seasonHot[0].Thumb', false)) {
          console.log('you')
          this.seasonHot = data.seasonHot
        }
        if (_.get(data, 'vlog.Thumb', false)) {
          this.vlog = data.vlog
        }
        if (_.get(data, 'townTour[0].Thumb', false)) {
          this.townTour = data.townTour
        }
        if (_.get(data, 'flowAd2.Thumb', false)) {
          this.ad2 = data.flowAd2
        }
        if (_.get(data, 'todayNews[0].NewsTitle', false)) {
          this.todayNews = data.todayNews
        }
        if (data.tourArticle.length > 0) {
          this.tourArticle = data.tourArticle
        }
        if (_.get(data, 'cateVideo.Thumb', false)) {
          this.cateVideo = data.cateVideo
        }
        if (_.get(data, 'cateAd[0].Thumb', false)) {
          this.cateAd = data.cateAd
        }
      }
      console.log(this.townTour)
    },
  },
  data() {
    return {
      searchKey: null,
      topSearchBg: false,
      tourArticle: [],
      townTour: [
        {
          Title: '',
          Thumb: '',
        },
        {
          Title: '',
          Thumb: '',
        },
      ],
      hotListBig: [
        {
          Title: '丹霞生态康养谷',
          Bref: '假期推荐',
          Thumb: '',
        },
      ],
      topSwipes: [],
      topNews: [
        {
          Title: '致敬英雄！临泽公安民警全程护航',
          id: 1,
        },
        {
          Title: '临泽：挥锹造林，今年要为4.6万亩国土披绿 ',
          id: 2,
        },
      ],
      ad1: {
        Thumb: '',
      },
      hotItems: [],
      techanItems: [],
      wenItems: [],
      trainData: [
        {
          arriveInfo: {
            time: moment().subtract(5, 'hours'),
            city: '陕西西安',
          },
          leaveInfo: {
            time: moment().add(2, 'hours'),
            city: '甘肃临泽',
          },
        },
        {
          arriveInfo: {
            time: moment().subtract(3, 'hours'),
            area: '甘肃兰州',
          },
          leaveInfo: {
            time: moment().add(2, 'hours'),
            area: '甘肃临泽',
          },
        },
      ],
      seasonHot: [],
      vlog: {
        Title: '阳光照射下的丹霞让人如醉如痴',
        Thumb: '',
      },
      cateVideo: {
        Thumb: '',
        Title: '四坝蒸饼',
        Bref: '临泽觅食大全',
      },
      cateAd: [],
      ad2: {
        Thumb: '',
        Link: '',
      },
      todayNews: [],
    }
  },
}
</script>
<style lang="scss" scoped>
.index {
  font-size: 12px;
  background-color: #fff;
  min-height: 100vh;
  .top-ad-image {
    height: 162px;
    img {
      max-height: 162px;
    }
  }
  .bottom-info {
    text-align: center;
  }
  .close-btn {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
  }
  .news {
    &-list {
      .item {
        width: 351px;
        border-radius: 4px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
        .content {
          .desc {
            line-height: 1.25;
          }
        }
        .image {
          width: 351px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .tour {
    &-list {
      .item {
        width: 351px;
        display: flex;
        justify-content: space-between;
        .image {
          width: 134px;
          height: 104px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .info {
          flex: 1;
          display: flex;
          flex-direction: column;
          .top {
            display: flex;
            justify-content: space-between;
            .left {
              display: flex;
              flex-direction: column;
              .title {
              }
              .author {
                display: flex;
                align-items: center;
                .avatar {
                  width: 12px;
                  height: 12px;
                  img {
                    width: 100%;
                    height: 100%;
                    border-radius: 100%;
                  }
                }
                &-name {
                  color: #ff5f3e;
                }
              }
            }
            .right {
              display: flex;
              flex-direction: column;
              align-items: center;
              .thumb_up {
                font-size: 22px;
                color: #ff5f3e;
              }
              .counts {
                color: #ff5f3e;
              }
            }
          }
          .content {
            margin-top: auto;
            margin-bottom: auto;
          }
          .more {
          }
        }
      }
    }
  }
  .top {
    position: relative;
    &-search {
      z-index: 99999;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      .logo {
        width: 42px;
        height: 35px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .search-input {
        flex: 1;
      }
      /deep/ .van-search__content {
      }
      &bg /deep/ .van-search__content {
        background-color: rgba(255, 255, 255, 0.75);
      }
    }
    &-search-bg {
      /deep/ .van-search__content {
        background-color: rgba(255, 255, 255, 0.75);
      }
    }
  }
  .hot-contents {
    .hot-item {
      width: 351px;
      display: flex;
      justify-content: space-between;
      .items {
        width: 171px;
        height: 131px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          border-radius: 4px;
        }
        .cover {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(0, 0, 0, 0.3);
          z-index: 1000;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          &-content {
            display: flex;
            flex-direction: column;
            align-items: center;

            .title {
              font-weight: 700;
              border-top: 1px solid #fff;
              border-bottom: 1px solid #fff;
            }
          }
        }
      }
    }
  }
  .hot-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .hot-item {
      width: 351px;
      display: flex;
      justify-content: space-between;
      background-color: #9e9e9e;
      .items {
        width: 171px;
        height: 131px;
        position: relative;
        .cover {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(0, 0, 0, 0.3);
          z-index: 1000;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;

          &-content {
            display: flex;
            flex-direction: column;
            align-items: center;

            .title {
              font-weight: 700;
              border-top: 1px solid #fff;
              border-bottom: 1px solid #fff;
            }
          }
        }
      }
    }
    .item {
      width: 171px;
      height: 131px;
      position: relative;
      &:last-child {
        width: 100%;
      }
      .cover {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 1000;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        &-content {
          display: flex;
          flex-direction: column;
          align-items: center;
          .title {
            font-weight: 700;
            border-top: 1px solid #fff;
            border-bottom: 1px solid #fff;
          }
        }
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .wen-content {
    display: flex;
    justify-content: space-between;
    .item {
      width: 113px;
      max-height: 146px;
      min-height: 146px;
      overflow: hidden;
      position: relative;
      border-radius: 4px;
      .cover {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 1000;
        border-radius: 4px;
        &-content {
          z-index: 999;
          position: absolute;
          left: 0;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          display: flex;
          flex-direction: column;
          align-items: center;
          .title {
            font-weight: 700;
          }
        }
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .quarter-hot {
    .content {
      width: 320px;
      height: 100px;
      position: relative;
    }
  }
  .vlog {
    .content {
      .card {
        border-radius: 4px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        position: relative;
        .mark {
          position: absolute;
          top: 12px;
          z-index: 999;
        }
      }
      .image {
        width: 351px;
        max-height: 151px;
      }
      .more {
        display: flex;
        align-items: center;
        .view-counts {
          margin-right: auto;
        }
        .user {
          &-avatar {
            width: 20px;
            height: 20px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 100%;
            }
          }
        }
        .more-icon {
          .icon {
            width: 24px;
            height: 24px;
          }
        }
      }
    }
  }
  .food {
    .content {
      display: flex;
    }
    &-list {
      display: flex;
      flex-direction: column;
      width: 169px;
      justify-content: space-between;
      .item {
        position: relative;
        .cover-bg {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(0, 0, 0, 0.3);
          border-radius: 4px;
        }
        .cover {
          transform: translate(-50%, -50%);
          position: absolute;
          left: 50%;
          top: 50%;
          border-top: 1px solid #fff;
          border-bottom: 1px solid #fff;
        }
        height: 131px;
        img {
          height: 100%;
          width: 100%;
        }
        &:first-child {
          margin-top: 0;
        }
      }
    }
    &-video {
      width: 169px;
      height: 271px;
      min-height: 271px;
      position: relative;
      .cover {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.3);
        display: flex;
        justify-content: center;
        align-items: center;
        &-content {
          .title,
          .desc {
            text-align: center;
          }
          .player-btn {
            width: 64px;
            height: 64px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      img {
        width: 100%;
        height: 100%;
        border-radius: 4px;
      }
    }
  }
  .agricola {
    .item {
      position: relative;
      .image {
        width: 270px;
        height: 123px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .cover {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.44);
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        .user {
          &-avatar {
            width: 17px;
            height: 17px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 100%;
            }
          }
        }
        .more-icon {
          .icon {
            width: 24px;
            height: 24px;
          }
        }
      }
    }
  }
}
.g-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 180px;
  text-align: center;
  background-color: #39a9ed;
}

.top-news {
  display: flex;
  height: 30px;
  overflow: hidden;
  .zaobao {
    width: 70px !important;
    height: 30px;
  }
  &-list {
  }
}
.techan {
  &-image {
    height: 100%;
    max-height: 100%;
  }
}
</style>
